<template>
      <div class="medium-area">
            <Header :isTransparentBackground="false"></Header>
            <div class="pt-gap-comm medium-main-box">
                  <!-- banner 及 辅助导航栏 开始 -->
                  <PageBanner pictureLink="https://www.tencent.com/img/news.jpg" :navHeadShow="false" :bannerHight="240" 
                        majorHeading="媒体资料库"></PageBanner>
                  <!-- banner 及 辅助导航栏 结束 -->
                  <div class="constraint breadcrumb-box flex ali-center">
                        <el-breadcrumb :separator-icon="ArrowRight">
                              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                              <el-breadcrumb-item>媒体</el-breadcrumb-item>
                              <el-breadcrumb-item>媒体资料库</el-breadcrumb-item>
                        </el-breadcrumb>
                  </div>
                  <div class="medium-main-content-group bg-write">
                        <div class="constraint">
                              <MediaMaterials :title-is-show="true"></MediaMaterials>
                        </div>
                  </div>
            </div>
            <CopyRight></CopyRight>
      </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
// 导航栏组件
import Header from '@/components/client/common/header/index.vue';
// 版权组件
import CopyRight from '@/components/client/common/copyright/index.vue';
import PageBanner from '@/components/client/common/pageBanner/index.vue'
import MediaMaterials from '@/components/client/medium/mediaMaterials.vue'
</script>